<template>
  <div class="category">
    <!-- 1.0 头部导航结构 -->
    <van-nav-bar title="栏目管理" left-arrow @click-left="$router.back()">
    </van-nav-bar>
    <!-- 2.0已关注的栏目 -->
    <div class="group follow">
      <h3 class="title">已关注栏目</h3>
      <p class="desc">点击删除以下频道</p>
      <div class="list">
        <span
          v-for="item in followList"
          :key="item.id"
          class="item"
          @click="removeFn(item)"
          >{{ item.name }}</span
        >
      </div>
    </div>
    <!-- 3.0未关注的栏目 -->
    <div class="group unfollow">
      <h3>未关注栏目</h3>
      <p class="desc">点击添加以下频道</p>
      <div class="list">
        <span
          class="item"
          v-for="item in unList"
          :key="item.id"
          @click="addFn(item)"
          >{{ item.name }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import { getColumnListAPI } from "../apis/index";
import { getToken } from "../utils/tokenData.js";
import { setCate, setunCate, getCate, getunCate } from "../utils/tokenData.js";
export default {
  methods: {
    removeFn(item1) {
      this.followList = this.followList.filter((item2) => {
        return item2.id != item1.id;
      });
      this.unList.unshift(item1);
    },
    addFn(item1) {
      this.unList = this.unList.filter((item2)=>{
         return item2.id != item1.id;
      })
      this.followList.unshift(item1);
    },
  },
  watch: {
    followList() {
      setCate(this.followList);
      setunCate(this.unList);
    },
  },
  data() {
    return {
      followList: getCate(),
      unList: getunCate(),
    };
  },
  async created() {
    if (this.followList.length == 0 && this.unList.length == 0) {
      const res = await getColumnListAPI();
      //   console.log(res);
      getToken() ? res.data.data.splice(0, 2) : res.data.data.splice(0, 1);
      this.followList = res.data.data;
    }
  },
};
</script>

<style lang="less" scoped>
.group {
  padding: 10px;
  .title {
    font-size: 15px;
    margin: 10px 0;
  }

  .desc {
    font-size: 12px;
    color: #999;
    margin: 5px 0;
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    .item {
      height: 35px;
      width: 23%;
      margin: 1%;
      border: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      position: relative;
      &::after {
        position: absolute;
        right: 5px;
        top: 0px;
      }
    }
  }
}
.follow .list .item::after {
  content: "-";
}
.unfollow .list .item::after {
  content: "+";
}
</style>
